import React, {Component} from 'react'
import styles from './order.less'
import isEmpty from 'lodash/isEmpty'
import reduce from 'lodash/reduce'
import { Button, Tooltip, Popconfirm } from 'antd'
import { connect } from 'dva'
import { GET_ORDER_LIST, DELETE_ORDER, CANCEL_ORDER } from "../../actions/order"

const statusMap = {
  'created': '待支付',
  'paid': '已完成',
  'cancelled': '已取消'
}

@connect(({ order }) => ({
  order
}))

class Order extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const {dispatch} = this.props
    dispatch(GET_ORDER_LIST())
  }

  delete(id) {
    const {dispatch} = this.props
    dispatch(DELETE_ORDER(id))
  }

  cancel(id) {
    const {dispatch} = this.props
    dispatch(CANCEL_ORDER(id))
  }

  render() {
    const {order: {orderList}} = this.props
    return (
      <div className={styles.orderContainer}>
        <div className={styles.orderTitle}>我的订单</div>
        {
          !isEmpty(orderList) &&
            orderList.map(item => {
              const { status, digest, orderNumber, createTime, items } = item
              const length = items.length
              let price = reduce(items, (sum, next) => {
                return sum + (next['productPrice'] * next['productCount'])
              }, 0)
              return (
                <div className={styles.orderContentBox} key={item.id}>
                  <div className={styles.orderContent}>
                    <div className={styles.orderStatus}>
                      {statusMap[status] || ''}
                      {
                        status == 'created' && <Button size={'small'} type={'primary'} style={{marginLeft: 15}}>
                          <Popconfirm
                            title="确定取消该订单吗?"
                            onConfirm={this.cancel.bind(this, item.id)}
                            okText="是"
                            cancelText="否"
                          >
                            取消订单
                          </Popconfirm>
                        </Button>
                      }
                      <Button size={'small'} danger style={{marginLeft: 15}}>
                        <Popconfirm
                          title="确定删除该订单吗?"
                          onConfirm={this.delete.bind(this, item.id)}
                          okText="是"
                          cancelText="否"
                        >
                          删除订单
                        </Popconfirm>
                      </Button>
                      <Tooltip
                        placement="top"
                        title={
                          <div>
                            <p>报名热线：010-57723978</p>
                            <p>手机：18810591683（微信）</p>
                            <p>手机：18810591685（微信）</p>
                            <p>客服QQ：87800882</p>
                            <p>客服QQ：11570882</p>
                          </div>
                        }>
                        <Button type="link">
                          联系客服
                        </Button>
                      </Tooltip>
                    </div>
                    <div className={styles.goodsContent}>
                      <div className={styles.goodsName}>{digest}</div>
                      <div className={styles.goodsPrice}>¥ {(price / 100 ).toFixed(2)}</div>
                      <div className={styles.payContent}>
                        <span className={styles.goodsCount}>共{length}件商品</span>
                        {
                          status == 'paid' &&
                          <span className={styles.goodsPay}>实付款：¥{(price / 100 ).toFixed(2)}</span>
                        }
                      </div>
                    </div>
                    <div className={styles.payInfo}>
                      <div className={styles.payNumber}>
                        <span>订单编号：</span>
                        <span>{ orderNumber }</span>
                      </div>
                      <div className={styles.payTime}>
                        <span>下单时间：</span>
                        <span>{ createTime }</span>
                      </div>
                      {/*<div className={styles.payWay}>*/}
                      {/*  <span>支付方式：</span>*/}
                      {/*  <span>微信</span>*/}
                      {/*</div>*/}
                    </div>
                  </div>
                </div>
              )
            })
        }
      </div>
    );
  }
}

export default Order